define(['jquery', 'template', 'widget/dialog'], function ($, template, dialog) {


    function tree(options) {

        var me = this;

        var defaults = {};

        $.extend(defaults, options, {
            tpl: {
                container: '<div class="tree">' +
                '<div class="tree-left">' +
                '<div class="tree-area-title">选择层级</div>' +
                '<ul class="tree-wrap">' +
                '{{#initTree}}' +
                '</ul></div>' +
                '<div class="tree-right">' +
                '<div class="tree-area-title">已选层级</div>' +
                '<div class="tree-node-selected">' +
                '</div></div>' +
                '</div>',
                treeNode: '<li class="tree-node">' +
                '<div  class="tree-node-info {{if children.length==0}}tree-leaf{{/if}}">' +
                '<span class="icon icon_collapse icon-{{cls}}"></span>' +
                '<label><input data-name="{{text}}" data-id="{{id}}" data-cls="icon-{{cls}}" type="checkbox" style="display: none;">' +
                '<span class="icon icon_checkbox"></span>{{text}}</label></div>' +
                '{{if children.length>0}}' +
                '<ul class="tree-nodes">' +
                '{{each children as v i}}' +
                '{{#initNode(v)}}' +
                '{{/each}}' +
                '</ul>' +
                '{{/if}}</li>',
                selectedNode: '<div data-id="{{id}}" class="tree-node-selected-item"><span class="icon icon-place {{cls}}"></span>{{name}}' +
                '<span class="icon icon-delete" data-id="{{id}}"></span>' +
                '</div>'
            }
        });

        template.helper('initNode', function (v) {
            return template.compile(defaults.tpl.treeNode)(v);
        });

        template.helper('initTree', function () {
            return template.compile(defaults.tpl.treeNode)(defaults.treeData);
        });


        var $tree = this.$tree = $(template.compile(defaults.tpl.container)());

        $tree.on('click', '.icon_expand', function () {
            $(this).closest('.tree-node').find('> .tree-nodes').slideDown(200);
            $(this).removeClass('icon_expand').addClass('icon_collapse')

        }).on('click', '.icon_collapse', function () {
            $(this).closest('.tree-node').find('> .tree-nodes').slideUp(200);
            $(this).removeClass('icon_collapse').addClass('icon_expand')
        }).on('click', '.icon-delete', function () {
            var id = $(this).data('id');
            $tree.find('input[type=checkbox][data-id=' + id + ']').prop('checked', false);
            $(this).closest('.tree-node-selected-item').remove();
        });

        var $nodeSelected = $tree.find('.tree-node-selected');
        $tree.find('input:checkbox').on('change', function () {

            var checked = $(this).prop('checked');
            var data = $(this).data();
            if (checked) {
                $nodeSelected.append(template.compile(defaults.tpl.selectedNode)(data));
            } else {
                $nodeSelected.find('[data-id=' + data.id + ']').remove();
            }
        });
    }

    tree.prototype = {
        constructor: tree,
        show: function () {
            dialog.show({
                content: this.$tree
            });
        }
    };

    return function factory(options) {
        return new tree(options);
    }

});